<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		body{
			background: #000;
		}
		#ul1{
			width: 133px;
			height: 247px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -67px;
			margin-top: -200px;
			transform: perspective(800px) rotateX(-10deg);
			transform-style: preserve-3d;
		}
		#ul1 li{
			width: 100%;
			height: 100%;
			cursor: pointer;
			position: absolute;
			left: 0;
			top: 0;
			background: url(../img/1.jpg) no-repeat;
			background-size: 100%;
			box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 205, 0.2), 0 0.3rem 1rem 0 rgba(0, 0, 205, 0.19);
			border: 1px solid #ccc;

			-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0)40%, rgba(0,0,0,0.4));
		}
	</style>

</head>
<body>

<ul id="ul1">
	
</ul>


<script>

window.onload=function(){

	var oUl=document.getElementById('ul1');

	var N=11;

	for(var i=0; i<N; i++){

		var oLi=document.createElement('li');

		oLi.style.backgroundImage='url(img/'+(i+1)+'.jpg)';

		oUl.appendChild(oLi);

		oLi.style.transition='.4s all ease '+(N-i)*200+'ms';

		!function(oLi,i){

			setTimeout(function(){

				oLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';

			},0);

		}(oLi,i);

	}

	var y=0;
	var x=-10;
	var aLi=oUl.children;

	aLi[0].addEventListener('transitionend',function(){

		change();

	},false);

	//拖拽

	var lastX=0;
	var lastY=0;
	var iSpeedX=0;
	var iSpeedY=0;

	var timer=null;
	document.onmousedown=function(ev){

		var disX=ev.clientX-y;
		var disY=ev.clientY-x;

		clearInterval(timer);
		for(var i=0; i<aLi.length; i++){

			aLi[i].style.transition='none';

		}

		document.onmousemove=function(ev){

			y=ev.clientX-disX;
			x=ev.clientY-disY;

			change(y/3,x/3);

			iSpeedX=ev.clientX-lastX;
			iSpeedY=ev.clientY-lastY;

			lastX=ev.clientX;
			lastY=ev.clientY;

		};

		document.onmouseup=function(){

			document.onmousemove=null;
			document.onmouseup=null;

			timer=setInterval(function(){

				iSpeedX*=0.95;
				iSpeedY*=0.95;

				y+=iSpeedX;
				x+=iSpeedY;

				change(y/3,x/3);

			},30);

		};

		return false;

	};

	function change(y,x){

		for(var i=0; i<aLi.length; i++){


			aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
			oUl.style.transform='perspective(800px) rotateX('+-x+'deg)';

			var scale=Math.abs(Math.abs((360/N*i+y)%360)-180)/180;

			scale<0.3 && (scale=0.3);
			aLi[i].style.opacity=scale;

		}

	}

};

</script> 

	
</body>
</html>